{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style type="text/css">
	.backlist .el-table::before{height: 0;}
	.backlist .el-table td{border-bottom: 0;}
	.w-30px{width: 30px;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_account"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow">
			<div class="flex">
				<div class="flex-1 block-title-before py-2">更换绑定邮箱</div>
			</div>
			<div class="bg-FFF0E5 p-3 mt-3 flex">
				<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
				<div class="flex-1 pl-2">
					<h6 class="text-primary">小提示</h6>
					<div class="text-secondary">手机号、邮箱认证通过后可增强您账号的安全性，也可通过已认证的手机号、邮箱快速登录帐号。</div>
				</div>
			</div>
			<div class="py-5">
				<el-form :model="registerTabs.form" @submit.native.prevent="submitForm()" :rules="[]" ref="form" label-width="0" label-position="right"
				class="w-25 mx-auto py-5">
				  <el-form-item class="input-item">
				    <el-input v-model="registerTabs.form.username"
				    :disabled="registerTabs.btn.loading"
				    autocomplete="off" placeholder="请输入邮箱"></el-input>
				  </el-form-item>
				  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1">
				        <div class="GeeTestCaptcha">
				            <div ref="GeeTestCaptchaWait" class="text-secondary">正在加载验证码......</div>
				        </div>
				  	</el-form-item>
				  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2">
				        <div class="vaptchaContainer">
							<div class="vaptcha-init-main">
							    <div class="vaptcha-init-loading">
							    <a href="/" target="_blank">
							        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
							    </a>
							    <span class="vaptcha-text">正在加载验证码...</span>
							    </div>
							</div>
						</div>
				  	</el-form-item>
				  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3">
				  	</el-form-item>
				  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4">
				  		<el-button 
				  		native-type="button" 
				  		:type="loginTabs.form.tsec?'success':'warning'"
				  		class="rounded-0 w-100 TencentCaptchaEl"
				  		:icon="loginTabs.form.tsec?'el-icon-circle-check':'el-icon-thumb'"
				  		:data-appid="_config.captchatsec"
				  		data-cbfn="vm.TencentCaptchaCallback">
				  			{{loginTabs.form.tsec?'验证成功':'点击验证'}}
				  		</el-button>
				  	</el-form-item>
				  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item">
						<el-input placeholder="验证码" v-model="registerTabs.form.imgcode" maxlength="6"
						class="border-right-0">
					    	<template slot="append" class="px-0">
					    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
					    	</template>
						</el-input>
				  	</el-form-item>
				  <el-form-item class="input-item">
				    <el-input v-model="registerTabs.form.vcode"
				    :disabled="registerTabs.btn.loading"
				    autocomplete="off" maxlength="6" placeholder="请输入验证码">
			    		<el-link slot="append" type="primary" :disabled="registerTabs.btn.getVcode || registerTabs.btn.loading" @click="getVcode">{{registerTabs.btn.getVcodeText}}</el-link>
				    </el-input>
				  </el-form-item>

				  <el-form-item class="mb-0">
			    	<el-button native-type="submit" type="primary" class="d-block w-100" :disabled="registerTabs.btn.submit || registerTabs.btn.loading" :loading="registerTabs.btn.loading">{{registerTabs.btn.loading?'提交中':'立即绑定'}}</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var CaptchaResultObj;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			registerTabs:{
				steps:0,
				btn:{
					loading:false,
					submit:true,
					getVcode:true,
					getVcodeText:'获取验证码',
					vcodeTimeIntervalId:null,
					vcodeDefaultTime:_config.vcodeDefaultTime,
					vcodeTime:_config.vcodeDefaultTime
				},
				form:{
					is_username_type:'email',
					username:'',
					email:'',
					vcode:'',
					imgcode:'',
					tsec:null,
					type:_config.action
				}
			}
		},
		watch:{
		    view:XYBase.viewWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
			registerTabs:{
				handler(val,oldVal){
					if (!val.btn.vcodeTimeIntervalId && val.form.username){
						if(XYBase.pattern.email.test(val.form.username)){
							val.btn.getVcode=false;
						}else val.btn.getVcode=true;
					}else val.btn.getVcode=true;
					if (XYBase.pattern.email.test(val.form.username)
						&&val.form.vcode) {
						val.btn.submit=false;
					}else val.btn.submit=true;
				},
				deep:true
			},
		},
		created(){
			this.loginTabs.is_imgcode=1;
			XYBase.created(this);
		},
		methods:XYBase.methods({
			getVcode(){
				var _this=this;
				var Data=_this.registerTabs.form,
					btnData=_this.registerTabs.btn;
					if(this.loginTabs.is_imgcode){
						switch(this.loginTabs.captcha_type){
							case 1:
								if (CaptchaResultObj)
		          				Data.geetest=CaptchaResultObj.getValidate();
							break
							case 2:
								if (CaptchaResultObj)
		          				Data.vaptcha=CaptchaResultObj.getToken();
							break
						}
					}
					_this.sendVcode(Data,btnData);
			},
			submitForm(){
				var _this=this;
				var Data=_this.registerTabs.form;
				if (!Data.username)
					return XYBase.warning('请输入账号');
				if(!XYBase.pattern.email.test(Data.username))
					return XYBase.warning('请输入正确的邮箱');
				if (!_this.registerTabs.form.vcode)
					return XYBase.warning('请输入验证码');
				if(this.loginTabs.is_imgcode){
					switch(this.loginTabs.captcha_type){
						case 1:
							if (CaptchaResultObj)
	          				Data.geetest=CaptchaResultObj.getValidate();
						break
						case 2:
							if (CaptchaResultObj)
	          				Data.vaptcha=CaptchaResultObj.getToken();
						break
					}
				}
				Data.email=Data.username;
				Data.is_username_type='email';
				this.registerTabs.btn.loading=true;
				$.ajax({
					url:'',
					type:'post',
					data:Data,
					dataType:'json',
					error:function(err){
						_this.registerTabs.btn.loading=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								XYBase.success(ret.msg);
								setTimeout(function(){
									window.location.href="/user/security";
								},1000);
							}else{
								_this.registerTabs.btn.loading=false;
								XYBase.msg(ret.msg);
							}
						}else{
							_this.registerTabs.btn.loading=false;
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		})
	});
</script>
{/block}